<template>
	<view class="fclass">
		<!-- 防止内容到状态栏 -->
		<view  class="fengge"></view>
		<!-- 导航栏 -->
		<view class="nav">
			<view class="nav-left">
				<view class="gril" :class="{active:navIndex ==  0}"  @click="navClick(0)">女生</view>
				<view class="boy"  :class="{active:navIndex ==  1}" @click="navClick(1)">男生</view>
			</view>
			<view class="nav-right">
				<image class="nav-img" src="/static/index/005.png" mode=""></image>
				<image src="/static/index/sec.png" mode="" @click="search"></image>
			</view>
		</view>
		<!-- 分类导航 -->
		<view class="fclass-nav">
			<fen-title-nav :list="listone"></fen-title-nav>
			<fen-title-nav :list="listtwo"></fen-title-nav>
			<fen-title-nav :list="listthree"></fen-title-nav>
		</view>
		<!-- 推荐 -->
		<view class="like-card">
			<datu-card :shulist="shulist"></datu-card>
		</view>
		<view class="loading">{{loadingText}}</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				navIndex:0, // 男生女生切换索引
				loadingText:'加载更多',
				listone:["玄幻","奇幻","武侠","仙侠","都市","现实","仙侠","都市","现实","仙侠"],
				listtwo:["50万字以下","50-100万字","100-200万字","200-200万字","300-400万字"],
				listthree:["连载","完结"],
				shulist:[
					{
						imgSrc:'/static/temp/item1.png',
						title:'开局快递奖励顶级跑车',
						geng:"更新至1288章",
						author:"月名 著",
						show:false,
						desc:`叶然被【生活体验神豪奖励系统】绑定，只要完成特殊任务
						就会得到系统神豪奖励。 “叮！你完成一单特殊快递系奖励你一... 跑车！！！”级跑车！！！”`
					},
					{
						imgSrc:'/static/temp/item2.png',
						title:'开着拖拉机去蹦迪',
						geng:"更新至1288章",
						author:"月名 著",
						show:false,
						desc:`叶然被【生活体验神豪奖励系统】绑定，只要完成特殊任务
						就会得到系统神豪奖励。 “叮！你完成一单特殊快递系奖励你一... 跑车！！！”级跑车！！！”`
					},
					{
						imgSrc:'/static/temp/item1.png',
						title:'开局快递奖励顶级跑车',
						geng:"更新至1288章",
						author:"月名 著",
						show:false,
						desc:`叶然被【生活体验神豪奖励系统】绑定，只要完成特殊任务
						就会得到系统神豪奖励。 “叮！你完成一单特殊快递系奖励你一... 跑车！！！”级跑车！！！”`
					}
				], //书名列表
				timer:null,
			}
		},
		onReachBottom(){
			console.log("页面触底了")
			let _this = this
			if( _this.timer != null){
			 clearTimeout(_this.timer);
			}
			_this.timer = setTimeout(function(){
			  _this.loading()
			}, 1000);
		},
		methods: {  //标题男女生切换
			navClick(i){
				this.navIndex = i
			},
			search(){ //搜索
				// console.log(1111)
				uni.navigateTo({
					url:'./search/search'
				})
			},
			loading(){
				this.loadingText = '加载中...'
			}
		}
	}
</script>

<style scoped lang="scss">
.fclass{
	.fengge{
		height: 158rpx;
	}
	.loading{text-align:center; line-height:80rpx;}
	.nav{
		display: flex;
		justify-content: space-between;
		padding: 87rpx 40rpx 23rpx;
		background-color: #fff;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 99;
		height: 158rpx;
		.nav-left{
			display: flex;
			font-size: 32rpx;
			font-family: Microsoft YaHei;
			font-weight: 400;
			color: #4D4D4D;
			.boy{
				margin-left: 34rpx;
			}
			.active{
				font-size: 40rpx;
				font-weight: bold;
				color: #FF5D0D;
			}
		}
		.nav-right{
			image{
				width: 38rpx;
				height: 38rpx;
			}
			.nav-img{
				margin-right: 34rpx;
			}
		}
	}
	.fclass-nav{
		margin-top: 15rpx;
	}
	.like-card{
		padding: 0 34rpx;
		box-sizing: border-box;
	}
}
</style>
